@extends('layouts.app')
@section('title', '首页')

@section('content_top')
  {{--  @include('layouts._category')--}}
{{--  @include('layouts._site_header')--}}
@stop

@section('content')
  {{--  <h1>这里是首页</h1>--}}
  {{--轮播图--}}
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://via.placeholder.com/2000x600" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://via.placeholder.com/2000x600" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://via.placeholder.com/2000x600" class="d-block w-100" alt="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

@stop

@section('styles')
  {{--  <link rel="stylesheet" type="text/css" href="{{ asset('css/banner_style.css?id=1') }}">--}}
  <style>
    .site-header {
      z-index: 20;
      height: 100px;
    }

    .site-header, .site-header .container {
      position: relative;
    }

    .site-header .header-nav {
      float: left;
      width: 850px;
    }

    .site-header .nav-list {
      position: relative;
      z-index: 10;
      float: left;
      width: 1100px;
      height: 88px;
      margin: 0;
      padding: 12px 0 0 30px;
      list-style-type: none;
      font-size: 16px;
    }

    .site-header .nav-category {
      position: relative;
      float: left;
      width: 127px;
      padding-right: 15px;
    }

    .site-header .nav-category .link-category {
      display: block;
      padding: 26px 0 38px;
      text-align: right;
      color: #333;
    }

    .site-category {
      display: block;
      position: absolute;
      top: 88px;
      left: -92px;
      z-index: 21;
      width: 234px;
      height: 460px;
      font-size: 14px;
    }

    .site-category-list {
      height: 418px;
      margin: 0;
      padding: 20px 0;
      list-style-type: none;
      border: 1px solid #ff6700;
      color: #424242;
      background: #fff;
    }

    .site-category-list.site-category-list-custom {
      height: 420px;
      border: 0;
      color: #fff;
      background: rgba(105, 101, 101, .6);
    }

    .site-category-list.site-category-list-custom .title {
      color: #fff;
    }

    .site-category-list .children {
      display: none;
      position: absolute;
      left: 234px;
      top: 0;
      z-index: 24;
      height: 458px;
      border: 1px solid #e0e0e0;
      border-left: 0;
      background: #fff;
      -webkit-box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
      box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
    }

    .site-category-list .children-col-3 {
      width: 795px;
    }
    .site-category-list .children-col-4 {
      width: 992px;
    }
    .site-category-list .children-list {
      height: 458px;
      margin: 0;
      padding: 2px 0;
      list-style-type: none;
    }
    .site-category-list .children-list-col {
      float: left;
      width: 265px;
    }
    .site-category-list .children-col-4 .children-list-col {
      width: 248px;
    }

    .site-category-list .children-list li {
      position: relative;
      float: left;
      width: 265px;
      height: 76px;
    }

    .site-category-list .title {
      position: relative;
      display: block;
      padding-left: 30px;
      height: 42px;
      line-height: 42px;
      color: #424242;
    }

    .site-category-list .children-list .link {
      display: block;
      padding: 18px 20px;
      line-height: 40px;
      color: #333;
      -webkit-transition: color .2s;
      transition: color .2s;
    }

    .site-category-list .children-list .thumb {
      float: left;
      margin-right: 12px;
      vertical-align: middle;
    }

    .site-category-list .children-list .text {
      float: left;
      width: 172px;
      line-height: 40px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  </style>
@stop

@section('scripts')
  {{--  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>--}}
  {{--  <script type="text/javascript" src="{{ asset('js/jquery.SuperSlide.2.1.3.js') }}"></script>--}}

  <script>
    //左侧分类导航
    // $('.category-option .cat-item').hover(function(){$(this).toggleClass('hover')})
    //图片轮播
    // jQuery(".scroll-banner").slide({mainCell:".scroll-content",titCell:".scroll-btn span",titOnClassName:"current",effect:"fold",autoPlay:true,delayTime:1000,interTime:3500});
  </script>
@stop
